<template>
    <div class="payment">
<el-form :inline="true"  class="demo-form-inline">
  <el-row :gutter="20">
    <el-col :offset="8">
  <el-form-item label="用户卡号">
    <el-input v-model="card" placeholder="请输入用户卡号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
    </el-col>
  </el-row>
</el-form>
  <el-table
    :data="user" 
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="card"
      label="用户卡号"
      width="135">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="姓名"
      width="135">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="135">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话"
      width="135">
    </el-table-column>
    <el-table-column
      prop="waterMeterId"
      label="水表id"
      width="135">
    </el-table-column>
    <el-table-column
      prop="waterNum"
      label="用水量 立方米"
      width="135">
    </el-table-column>
    <el-table-column
      prop="price"
      label="单价 元/立方米"
      width="135">
    </el-table-column>
    <el-table-column
      prop="lateFee"
      label="滞纳金"
      width="135">
    </el-table-column>
    <el-table-column
      prop="pay_month"
      label="月份"
      width="135">
    </el-table-column>
    <el-table-column
      prop="total"
      label="合计"
      width="135">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="缴费"
      width="135">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">立即缴费</el-button>
      </template>
    </el-table-column> -->

   </el-table> 
  <!-- <form action="http://localhost:8081/payment-form/addOrder" method="post">
      <input type="hidden" name="card" :value="orderForm.card">
      <input type="hidden" name="billMoney" :value="orderForm.billMoney">
      <input type="hidden" name="payMonth" :value="orderForm.payMonth">
      <div>
        <input type="text" name="userId" id="" placeholder="请输入用户卡号" v-model="card">
        <input type="button" value="查看缴纳费用" @click="doQuery">
      </div>
      <table>
          <thead>
              <th>用户卡号</th>
              <th>姓名</th>
              <th>地址</th>
              <th>联系电话</th>
              <th>水表id</th>
              <th>用水量 立方米</th>
              <th>单价 元/立方米</th>
              <th>滞纳金</th>
              <th>月份</th>
              <th>合计</th>
              <th>缴费</th>
          </thead>
          <tbody>
            <tr>
              <td>{{user.card}}</td>
              <td>{{user.userName}}</td>
              <td>{{user.address}}</td>
              <td>{{user.phone}}</td>
              <td>{{user.waterMeterId}}</td>
              <td>{{user.waterNum}}</td>
              <td>{{user.price}}</td>
              <td>{{user.lateFee}}</td>
              <td>{{user.pay_month}}</td>
              <td>{{user.total}}</td>
              <td><input type="submit" value="立即缴费" ></td>
            </tr>
          </tbody>
      </table>
  </form> -->
    </div>

</template>
<style>

</style>
<script>
export default {
    name:'Payment',
    data(){
        return{
             card:'',
             user: [
               {
               card: '',
               userName: '',
               address: '',
               phone: '',
               waterMeterId: '',
               waterNum: '',
               price: '',
               lateFee: '',
               pay_month:'',
               total: '',
        }
        ],

        // user: 
        //        {
        //        card: '',
        //        userName: '',
        //        address: '',
        //        phone: '',
        //        waterMeterId: '',
        //        waterNum: '',
        //        price: '',
        //        lateFee: '',
        //        pay_month:'',
        //        total: '',
        // }
        // ,

        orderForm:{
          card:'',
          billMoney:'',
          payMonth:''
        }
        }
    },
    methods:{
        // doQuery(){
        //     console.log(this.card);
        //     this.$http.get("/payment-form/getPayment",{params:{card:this.card}})
        //     .then((result) => {
        //         console.log(result);
        //         if(result.data.status){
        //           this.user.card = result.data.object.card;
        //           this.user.userName = result.data.object.userName;
        //           this.user.address = result.data.object.address;
        //           this.user.phone = result.data.object.phone;
        //           this.user.waterMeterId = result.data.object.waterMeterId;
        //           this.user.waterNum = result.data.object.waterNum;
        //           this.user.price = result.data.object.price;
        //           this.user.lateFee = result.data.object.lateFee;
        //           this.user.pay_month = result.data.object.pay_month;
        //           this.user.total = result.data.object.total;
              
        //           this.orderForm.card=this.user.card;
        //           this.orderForm.billMoney=this.user.total;
        //           this.orderForm.payMonth=this.user.pay_month;
        //           console.log(this.orderForm);
        //           if(result.data.object.lateFee==null){
        //             this.user[0].lateFee = 0;
        //           }
        //         }
        //         else{
        //           alert(result.data.massage);
        //         }
        //     }).catch((err) => {
        //         alert("暂无欠费")              
        //     });
            
        // }，
        //根据户号查询缴费信息
        onSubmit(){
            console.log(this.card);
            this.$http.get("/payment-form/getPayment",{params:{card:this.card}})
            .then((result) => {
                console.log(result);
                if(result.data.status){
                  this.user[0].card = result.data.object.card;
                  this.user[0].userName = result.data.object.userName;
                  this.user[0].address = result.data.object.address;
                  this.user[0].phone = result.data.object.phone;
                  this.user[0].waterMeterId = result.data.object.waterMeterId;
                  this.user[0].waterNum = result.data.object.waterNum;
                  this.user[0].price = result.data.object.price;
                  this.user[0].lateFee = result.data.object.lateFee;
                  this.user[0].pay_month = result.data.object.pay_month;
                  this.user[0].total = result.data.object.total;
                  //设置类似缓存
                  this.$url.setCard(this.card);
                  if(result.data.object.lateFee==null){
                    this.user[0].lateFee = 0;
                  }
                }
                else{
                  alert(result.data.massage);
                }
            }).catch((err) => {
                alert("暂无欠费")              
            });
            
        },
        //缴费操作
        handleClick(row) {
            // console.log(row);
            this.orderForm.card=this.user[0].card;
            this.orderForm.billMoney=this.user[0].total;
            this.orderForm.payMonth=this.user[0].pay_month;
            // console.log(this.orderForm);
            //向后端传送数据
            this.$http.post("/payment-form/addOrder",this.orderForm)
            .then((result)=>{
                let sys = result.data.split('<script>document');
                this.$url.setClassifys(sys[0]);
                this.$router.push("/alipay");
                // this.$url.setClassifys(result.data),
                // this.$router.push("/alipay")
                // window.open(result.request.responseURL);
            }).catch((err)=>{
                console.error(err);
            })
      },
      
    },
    mounted(){
        this.card=this.$url.state.card;
        // console.log(this.card);
      }
}
</script>